<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>文件播放系统</title>
		<style type="text/css">
			html,
			body {
				padding: 0;
				margin: 0;
			}

			#App {
				background: transparent;
				width: 100vw;
				height: 100vh;
				display: flex;
				flex-direction: column;
			}

			#App .video {
				width: 100%;
				height: 100%;
				opacity: 0;
			}
			#App .showVideo {
				opacity: 1;
			}

			#App .audio {
				margin: auto;
				opacity: 0;
			}
			#App .showAudio {
				opacity: 1;
			}
			
			#App .pinch-zoom{
				width: 100vw;
				height: 100vh;
				background: #000000;
				opacity: 0;
			}
			#App .image{
				width: 100%;
				height: 100%;
				object-fit:contain;
			}
			#App .showImg{
				opacity: 1;
			}
			
		</style>
	</head>
	<body>
		<div id="App">
			<video :src="videoSrc" autoplay v-if="videoSrc" controls class="video" :class="videoSrc?'showVideo':''"></video>
			<div class="pinch-zoom"   data-scale="1" :class="imgSrc?'showImg':''">
				<img :src="imgSrc" v-if="imgSrc"  class="image"/>
			</div>
			
			<audio id="myAudio" controls v-if="audioSrc" class="audio" :class="audioSrc?'showAudio':''">
				<source :src="audioSrc" type="audio/ogg">
				<source :src="audioSrc" type="audio/mpeg">
				暂不支持播放此类型
			</audio>
			<iframe :src='wordSrc' width='100%' height='100%' frameborder='1' v-if="wordSrc"></iframe>
		</div>
		<!-- uni 的 SDK -->
		<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
		<script type="text/javascript" src="../js/vue.js"></script>
		<script type="text/javascript" src="../js/global.js"></script>
		<!-- 图片双指缩放 -->
		<script type="text/javascript" src="../imagePreview/jquery-351.min.js"></script>
		<script src="../imagePreview/pinchzoom.js"></script>
		<script>
				
		</script>
		<script type="text/javascript">
			document.addEventListener('UniAppJSBridgeReady', function() {
				let that
				//webview传参到html5网页
				let {
					base64,
					type
				} = plus.webview.currentWebview();
				console.log(base64.slice(0, 50));
				new Vue({
					el: '#App',
					data: {
						videoSrc: '',
						imgSrc: '',
						audioSrc: '',
						wordSrc: '',
						aHref: ""
					},
					async mounted() {
						that = this
						let blob = that.dataURLtoBlob(base64)
						/**
						 *  URL对象用于生成指向File对象或Blob对象的URL。 
						 * 这个URL可以放置于任何通常可以放置URL的地方，比如img标签的src属性
						 **/
						var blobUrl = URL.createObjectURL(blob);
						console.log(blobUrl);
						console.log(type);
						if (type == 'video') {
							that.videoSrc = blobUrl
						} else if (type == 'audio') {
							that.audioSrc = blobUrl
						} else if (type == 'image') {
							that.imgSrc=blobUrl
						}
						// 在每次调用createObjectURL()方法时，都会创建一个新的URL对象，即使你已经用相同的对象作为参数创建过。当不再需要这些URL对象时，每个对象必须通过调用URL.revokeObjectURL()方法来释放
						setTimeout(() => {
							window.URL.revokeObjectURL(blobUrl); //释放createObjectURL创建得对象
						}, 2000)
						//双指缩放
						that.zoomFn()

					},
					methods: {
						//双指缩放
						zoomFn(){
							$('div.pinch-zoom').each(function () {
								new RTP.PinchZoom($(this), {});
							});
						},
						//base64转成blob对象第一种方式
						dataURLtoBlob(dataurl){
							var arr = dataurl.split(','),
								mime = arr[0].match(/:(.*?);/)[1],
								bstr = atob(arr[1]),
								n = bstr.length,
								u8arr = new Uint8Array(n);//8位无符号整数，长度1个字节
							console.log(mime)
							while (n--) {
								u8arr[n] = bstr.charCodeAt(n);
							}
							// console.log(JSON.stringify(u8arr));
							return new Blob([u8arr], {
								type: mime
							});
						},


					}
				})
			});
		</script>
	</body>
</html>
